/**
* v-anchors 锚点导航
* anchorsClass 锚点class
* scrollClass 滚动元素class
* disabled 是否禁用
* 2023 blryli
*/

export default {
  beforeUpdate(el, binding) {
    const { scrollClass, disabled } = binding.value
    el.setAttribute('data-disabled', disabled)
    disabled && clearAnchors(scrollClass)
  },
  updated(el, binding) {
    const { anchorsClass, scrollClass, disabled } = binding.value
    const scrollEl = document.querySelector(scrollClass)
    if(!scrollEl) return
    const anchors = Array.from(el.querySelectorAll(anchorsClass))
    
    const handlerScroll = (e) => {
      if(el.getAttribute('data-disabled') === 'true') return
      setCurrentAnchors(scrollEl, anchors)
    }
    const handlerClick = (e) => {
      if(el.getAttribute('data-disabled') === 'true') return
      setScrollTop(scrollEl, anchors, e)
    }
    scrollEl.removeEventListener("scroll", handlerScroll)
    scrollEl.removeEventListener("click", handlerClick)
    if (binding.value.disabled) {
      el.style.width = '100%'
      clearAnchors()
      return
    }
    addAnchors(scrollEl, anchors)
    setCurrentAnchors(scrollEl, anchors)
    el.style.width = 'calc(100% - 160px)'
    scrollEl.addEventListener("scroll", handlerScroll)
    scrollEl.addEventListener("click", handlerClick)
    el.$destroyCopy = () => {
      scrollEl.removeEventListener("scroll", handlerScroll)
      scrollEl.removeEventListener("click", handlerClick)
    }
  },
  beforeUnmount(el, binding) {
    const { scrollClass } = binding.value
    clearAnchors(scrollClass)
  },
}

// 清空锚点
const clearAnchors = (scrollClass) => {
  const scrollEl = document.querySelector(scrollClass)
  if (scrollEl) {
    const anchorEl = scrollEl.querySelector('.v-anchors')
    anchorEl && scrollEl.removeChild(anchorEl)
  }
}

// 添加锚点
const addAnchors = (scrollEl, anchors) => {
  if (scrollEl.querySelector('.v-anchors')) return
  const scrollElRect = scrollEl.getBoundingClientRect()
  const anchore = document.createElement('div')
  anchore.setAttribute('class', 'v-anchors')
  anchore.style = `width: 140px;position:fixed;top: ${scrollElRect.top + 30}px;right: 10px;display: flex;flex-direction: column;gap:1.25rem;padding-left: 0.75rem;`

  for (const [i, item] of Object.entries(anchors)) {
    const d = document.createElement('div')
    d.setAttribute('class', 'v-anchors-item')
    d.setAttribute('data-index', i)
    d.style.borderLeft = '2px solid transparent'
    d.style.paddingLeft = '10px'
    d.style.lineHeight = '12px'
    d.style.cursor = 'pointer'
    d.innerText = item.innerText
    anchore.appendChild(d)
  }
  scrollEl.appendChild(anchore)
}

// 设置激活锚点
const setCurrentAnchors = (scrollEl, anchors) => {
  const { scrollTop, offsetHeight, scrollHeight } = scrollEl
  const items = scrollEl.querySelectorAll('.v-anchors-item')
  const { length } = items
  items.forEach(d => {
    d.style.borderLeftColor = 'transparent'
    d.style.color = '#888'
  })
  let item = null
  if (scrollTop + offsetHeight >= scrollHeight) {
    item = items[length - 1]
  } else {
    for (const [i, d] of Object.entries(anchors)) {
      if (d.getBoundingClientRect().top > 10) {
        item = items[i]
        break
      }
    }
  }
  if (!item) {
    item = items[0]
  }
  item.style.color = 'var(--color-primary)'
  item.style.borderLeftColor = 'var(--color-primary)'
}

// 设置滚动位置
const setScrollTop = (scrollEl, anchors, e) => {
  const { target } = e
  const index = target.getAttribute('data-index')
  if (index === null) return
  anchors[index].scrollIntoView({ behavior: 'smooth' })
}